<template>
    <div id="app">
        <div>
            obj:{{ getObj.a }}
            <el-button @click="changeObjEvent">
                改变obj
            </el-button>


            <div>
                arr: {{ getArr[0].name}}
                <el-button @click="changeArrEvent">
                    改变数组arr
                </el-button>
            </div>
        </div>
         <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
         <!--<TestGetter />-->
         <!--<TestMutation title="TestMutation组件"/>-->
         <!--<TestAction />-->
        <!--<TestMoudle />-->
        <FormDeal />
    </div>
</template>

<script>
//     import HelloWorld from './components/HelloWorld.vue';
//     import TestGetter from './components/TestGetter.vue';
//     import TestMutation from '@/components/TestMutation';
//    import TestAction from '@/components/TestAction';
    //import TestMoudle from '@/components/TestMoudle';
    import FormDeal from '@/components/FormDeal';

    export default {
        name: 'App',
        components: {
//             HelloWorld,
//             TestGetter,
//             TestMutation,
//            TestAction,
//            TestMoudle,
            FormDeal,
        },
        computed: {
            getObj() {
                return this.$store.state.obj;
            },
            getArr() {
                return this.$store.state.arr;
            }
        },
        methods: {
            changeObjEvent() {
                this.$store.commit('changeObj',{a: 2,b: 3,c:4});
            },
            changeArrEvent() {
                let newArr = [
                    { id: 2,name: 'tianxia123'},
                    { id: 3,name: 'xiao123' }
                ]
               this.$store.commit('changeArr',newArr); 
            }
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
